<template>
  <div class="study-container">
    <el-row :gutter="20" class="header-row">
      <el-col :span="24">
        <h2 class="page-title">学习中心</h2>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="subject-cards">
      <!-- 科目一 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="subject-card subject-1" :class="{ 'locked': !canStudySubject1 }" shadow="hover">
          <div class="subject-icon">
            <i class="el-icon-reading"></i>
          </div>
          <h3>科目一</h3>
          <p class="subject-desc">交通法规与道路安全</p>
          <el-progress :percentage="subject1Progress" :format="format"></el-progress>
          <div class="subject-actions">
            <el-button type="primary" @click="startLearning(1)" :disabled="!canStudySubject1">
              {{ getButtonText(1) }}
            </el-button>
            <el-button type="text" @click="viewDetails(1)">查看详情</el-button>
          </div>
          <div v-if="!canStudySubject1" class="unlock-tip">{{ getSubjectStatus[1] }}</div>
        </el-card>
      </el-col>

      <!-- 科目二 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="subject-card subject-2" :class="{ 'locked': !canStudySubject2 }" shadow="hover">
          <div class="subject-icon">
            <i class="el-icon-position"></i>
          </div>
          <h3>科目二</h3>
          <p class="subject-desc">场地驾驶技能</p>
          <el-progress :percentage="subject2Progress" :format="format"></el-progress>
          <div class="subject-actions">
            <el-button type="primary" @click="startLearning(2)" :disabled="!canStudySubject2">
              {{ getButtonText(2) }}
            </el-button>
            <el-button type="text" @click="viewDetails(2)">查看详情</el-button>
          </div>
          <div v-if="!canStudySubject2" class="unlock-tip">{{ getSubjectStatus[2] }}</div>
        </el-card>
      </el-col>

      <!-- 科目三 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="subject-card subject-3" :class="{ 'locked': !canStudySubject3 }" shadow="hover">
          <div class="subject-icon">
            <i class="el-icon-guide"></i>
          </div>
          <h3>科目三</h3>
          <p class="subject-desc">道路驾驶技能</p>
          <el-progress :percentage="subject3Progress" :format="format"></el-progress>
          <div class="subject-actions">
            <el-button type="primary" @click="startLearning(3)" :disabled="!canStudySubject3">
              {{ getButtonText(3) }}
            </el-button>
            <el-button type="text" @click="viewDetails(3)">查看详情</el-button>
          </div>
          <div v-if="!canStudySubject3" class="unlock-tip">{{ getSubjectStatus[3] }}</div>
        </el-card>
      </el-col>

      <!-- 科目四 -->
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card class="subject-card subject-4" :class="{ 'locked': !canStudySubject4 }" shadow="hover">
          <div class="subject-icon">
            <i class="el-icon-notebook-2"></i>
          </div>
          <h3>科目四</h3>
          <p class="subject-desc">安全文明驾驶</p>
          <el-progress :percentage="subject4Progress" :format="format"></el-progress>
          <div class="subject-actions">
            <el-button type="primary" @click="startLearning(4)" :disabled="!canStudySubject4">
              {{ getButtonText(4) }}
            </el-button>
            <el-button type="text" @click="viewDetails(4)">查看详情</el-button>
          </div>
          <div v-if="!canStudySubject4" class="unlock-tip">{{ getSubjectStatus[4] }}</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 学习进度详情对话框 -->
    <el-dialog
      :title="'科目' + currentSubject + '学习详情'"
      :visible.sync="dialogVisible"
      width="50%">
      <div class="study-details">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="总学时">{{ studyDetails.totalHours }}小时</el-descriptions-item>
          <el-descriptions-item label="已完成学时">{{ studyDetails.completedHours }}小时</el-descriptions-item>
          <el-descriptions-item label="学习进度">{{ studyDetails.progress }}%</el-descriptions-item>
          <el-descriptions-item label="考试状态">{{ studyDetails.examStatus }}</el-descriptions-item>
          <el-descriptions-item label="最近学习">{{ studyDetails.lastStudyTime }}</el-descriptions-item>
          <el-descriptions-item label="下次预约">{{ studyDetails.nextAppointment || '暂无' }}</el-descriptions-item>
        </el-descriptions>

        <div class="study-timeline">
          <h4>学习记录</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(record, index) in studyDetails.records"
              :key="index"
              :timestamp="record.time"
              :type="record.type">
              {{ record.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="makeAppointment">预约学习</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'StudyPage',
  data() {
    return {
      subject1Progress: 85,
      subject2Progress: 60,
      subject3Progress: 30,
      subject4Progress: 0,
      dialogVisible: false,
      currentSubject: 1,
      studyDetails: {
        totalHours: 0,
        completedHours: 0,
        progress: 0,
        examStatus: '',
        lastStudyTime: '',
        nextAppointment: '',
        records: []
      }
    }
  },
  computed: {
    // 计算各科目是否可以学习
    canStudySubject1() {
      return true; // 科目一始终可以学习
    },
    canStudySubject2() {
      return true; // 科目一完成后才能学习科目二
    },
    canStudySubject3() {
      return this.subject2Progress === 100; // 科目二完成后才能学习科目三
    },
    canStudySubject4() {
      return this.subject3Progress === 100; // 科目三完成后才能学习科目四
    },
    // 获取科目状态描述
    getSubjectStatus() {
      return {
        1: this.canStudySubject1 ? '可以学习' : '等待解锁',
        2: this.canStudySubject2 ? '可以学习' : '需完成科目一',
        3: this.canStudySubject3 ? '可以学习' : '需完成科目二',
        4: this.canStudySubject4 ? '可以学习' : '需完成科目三'
      }
    }
  },
  methods: {
    format(percentage) {
      return percentage === 100 ? '完成' : `${percentage}%`
    },
    startLearning(subject) {
      if (!this[`canStudySubject${subject}`]) {
        const prevSubject = subject - 1;
        this.$message.warning(`请先完成科目${prevSubject}的学习`);
        return;
      }
      this.$message.success(`开始科目${subject}学习`);
    },
    viewDetails(subject) {
      this.currentSubject = subject;
      this.loadStudyDetails(subject);
      this.dialogVisible = true;
    },
    loadStudyDetails(subject) {
      // 根据不同科目加载不同的学习详情
      const progress = this[`subject${subject}Progress`];
      const canStudy = this[`canStudySubject${subject}`];
      
      this.studyDetails = {
        totalHours: 50,
        completedHours: Math.floor(50 * progress / 100),
        progress: progress,
        examStatus: progress === 100 ? '已通过' : (canStudy ? '未考试' : '未解锁'),
        lastStudyTime: canStudy ? '2024-03-20 14:30' : '--',
        nextAppointment: canStudy ? '2024-03-22 09:00' : '--',
        records: canStudy ? [
          {
            time: '2024-03-20 14:30',
            content: `完成科目${subject}理论课程学习`,
            type: 'success'
          },
          {
            time: '2024-03-19 10:00',
            content: '参加模拟考试，得分85分',
            type: 'warning'
          },
          {
            time: '2024-03-18 09:30',
            content: '预约下周实操课程',
            type: 'primary'
          }
        ] : []
      }
    },
    makeAppointment() {
      if (!this[`canStudySubject${this.currentSubject}`]) {
        this.$message.warning(`请先完成科目${this.currentSubject - 1}的学习`);
        return;
      }
      this.$message.success('预约成功！');
      this.dialogVisible = false;
    },
    getButtonText(subject) {
      if (!this[`canStudySubject${subject}`]) {
        return '未解锁';
      }
      const progress = this[`subject${subject}Progress`];
      if (progress === 100) return '复习';
      if (progress > 0) return '继续学习';
      return '开始学习';
    }
  }
}
</script>

<style scoped>
.study-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header-row {
  margin-bottom: 30px;
}

.page-title {
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  padding-bottom: 15px;
  border-bottom: 2px solid #409EFF;
  display: inline-block;
}

.subject-cards {
  margin-bottom: 20px;
}

.subject-card {
  height: 100%;
  text-align: center;
  padding: 20px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.subject-card:hover {
  transform: translateY(-5px);
}

.subject-card.locked::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.subject-card.locked::after {
  content: '🔒';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  z-index: 2;
  opacity: 0.5;
}

.subject-card.locked .subject-icon,
.subject-card.locked h3,
.subject-card.locked p,
.subject-card.locked .el-progress,
.subject-card.locked .subject-actions {
  opacity: 0.5;
}

/* 添加解锁提示 */
.unlock-tip {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
  z-index: 3;
}

.subject-icon {
  font-size: 40px;
  margin-bottom: 15px;
  color: #409EFF;
}

.subject-card h3 {
  margin: 10px 0;
  color: #2c3e50;
  font-size: 20px;
}

.subject-desc {
  color: #606266;
  margin-bottom: 20px;
  font-size: 14px;
}

.subject-actions {
  margin-top: 20px;
}

.subject-1 .subject-icon { color: #409EFF; }
.subject-2 .subject-icon { color: #67C23A; }
.subject-3 .subject-icon { color: #E6A23C; }
.subject-4 .subject-icon { color: #F56C6C; }

.el-progress {
  margin-top: 15px;
}

.study-details {
  padding: 20px 0;
}

.study-timeline {
  margin-top: 30px;
}

.study-timeline h4 {
  margin-bottom: 20px;
  color: #2c3e50;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .subject-card {
    margin-bottom: 20px;
  }
}

.el-button--text {
  padding: 0;
  margin-top: 10px;
}

.el-timeline {
  margin-top: 20px;
}

.el-descriptions {
  margin-bottom: 20px;
}
</style>